<template>
    <div id="ganttChart" style="width: 1000px;height: 500px;"></div>
</template>
<script>
    import echarts from 'echarts' // 注意echarts版本，高版本不支持透明度rgba,以下代码版本为3.8.5

    export default {
        name: 'project-progress',
        data() {
            return {
                ganttChart: null,
                chartData: [
                    {
                        name: '节点1',
                        timing: ['2020-02-10', '2020-02-15']
                    },
                    {
                        name: '节点2',
                        timing: ['2020-03-20', '2020-03-28']
                    },
                    {
                        name: '节点3',
                        timing: ['2020-05-15', '2020-05-26']
                    },
                    {
                        name: '节点4',
                        timing: ['2020-03-03', '2020-03-25']
                    }
                ],

                oldArr: [
                    {
                        father: "Bob",
                        progeny: ['Lily', 'Brant']
                    },
                    {
                        father: "Caspar",
                        progeny: ['George', 'Cary']
                    }
                ],

                /*newArr:[
                    {
                        father: "Bob",
                        daughter: 'Lily',
                        son:'Brant'
                    },
                    {
                        father: "Caspar",
                        daughter: 'Cary',
                        son:'George'
                    }
                ]*/

            }
        },
        mounted() {
            this.initChart()
            // this.getObject()
        },
        methods: {
            initChart() {
                let myGantt = echarts.init(document.getElementById('ganttChart'))
                let newArr = []
                for (let i = 0; i < this.chartData.length; i++) {
                    let obj = {}
                    obj.name = this.chartData[i].name
                    obj.startTime = this.chartData[i].timing[0]
                    obj.endTime = this.chartData[i].timing[1]
                    newArr.push(obj)
                }
                console.log(newArr);
                let option = {
                    backgroundColor: "#fff",
                    title: {
                        text: "项目工期",
                        padding: 20,
                    },
                    xAxis: {
                        type: "time",
                    },
                    yAxis: {
                        axisLabel: {
                            show: true,
                            interval: 0,
                        },
                        data: newArr.map(item => item.name)
                    },
                    tooltip: {
                        trigger: "axis",
                        formatter: function (params) {
                            let res = ""
                            res += `${params[0].name}<br>`
                            res += `开始时间：${params[0].value}<br>`
                            res += `结束时间：${params[1].value}`
                            return res
                        }
                    },
                    series: [
                        {
                            name: "项目实施阶段",
                            type: "bar",
                            stack: "总量5",
                            itemStyle: {
                                normal: {
                                    color: "white",
                                }
                            },
                            zlevel: -1,
                            z: 3,
                            data: newArr.map(item => item.startTime)
                        },
                        {
                            name: "项目实施阶段",
                            type: "bar",
                            stack: "总量5",
                            itemStyle: {
                                normal: {
                                    color: "skyblue",
                                    borderColor: "#fff",
                                    borderWidth: 2
                                }
                            },
                            zlevel: -1,
                            data: newArr.map(item => item.endTime)
                        },

                    ]
                }
                myGantt.setOption(option)
            },
            getObject() {
                let oldArr = [
                    {
                        father: "Bob",
                        progeny: ['Lily', 'Brant']
                    },
                    {
                        father: "Caspar",
                        progeny: ['George', 'Cary']
                    }
                ]
                let newArr = []
                for (let i = 0; i < oldArr.length; i++) {
                    let obj = {}
                    obj.father = oldArr[i].father
                    obj.daughter = oldArr[i].progeny[0]
                    obj.son = oldArr[i].progeny[1]
                    newArr.push(obj)
                }
                console.log(newArr);
            }
        }

    }
</script>